<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <div class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8" />
                        <div class="title">
                            <span class="title-text">{{ title }}</span>
                            <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
                        </div>
                        <dv-decoration-8 class="dv-dec-8" :reverse="true" />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-right bg-color-blue mr-3" @click="shou">
                            <span class="text fw-b">数据监控</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao">
                            <span class="text fw-b">政务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao2">
                            <span class="text fw-b">事项办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao3">
                            <span class="text fw-b">诉求治理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao4">
                            <span class="text fw-b">调节分析</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao5">
                            <span class="text fw-b">新媒体监管</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao6">
                            <span class="text fw-b">新媒体监管11</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao7">
                            <span class="text fw-b">服务大厅</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao8">
                            <span class="text fw-b">服务办件</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao9">
                            <span class="text fw-b">交易政务</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao10">
                            <span class="text fw-b">服务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao11">
                            <span class="text fw-b">督查考核</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">
                    <div class="content-box">
                        <!-- 左边 -->
                        <div class="top-box">
                            <div class="top-box1">
                                <dv-border-box-8>
                                    <div>
                                        <p style="padding-left: 20px;padding-top: 10px;">审批工作能效</p>
                                        <div>
                                            <div style="display: flex; margin-left: 30px;margin-top: 20px;">
                                                <div style="display: flex;">
                                                    <img src="../../images/1.png" alt="" style="width: 50px;">
                                                    <div>
                                                        <p style="color: #0279af; font-size: 20px;">98.66%</p>
                                                        <p style=" font-size: 10px;">按时办结率</p>
                                                    </div>
                                                </div>
                                                <div style="display: flex; margin-left: 140px;">
                                                    <img src="../../images/2.png" alt="" style="width: 50px;">
                                                    <div>
                                                        <p style="color: #04d319; font-size: 20px;">18.66%</p>
                                                        <p style=" font-size: 10px;">提前办结率</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="display: flex; margin-left: 30px;margin-top: 20px;">
                                                <div style="display: flex;">
                                                    <img src="../../images/3.png" alt="" style="width: 50px;">
                                                    <div>
                                                        <p style="color: #dc851f; font-size: 20px;">98件</p>
                                                        <p style=" font-size: 10px;">超时预警</p>
                                                    </div>
                                                </div>
                                                <div style="display: flex; margin-left: 165px;">
                                                    <img src="../../images/4.png" alt="" style="width: 50px;">
                                                    <div>
                                                        <p style="color: #d3001a; font-size: 20px;">8件</p>
                                                        <p style=" font-size: 10px;">超时办结</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-8>
                            </div>
                            <div class="top-box2">
                                <dv-border-box-8 :reverse="true">
                                    <div>
                                        <p style="padding-left: 20px;padding-top: 10px;">入驻委办局办件情况</p>
                                        <div style="width: 90%;height:250px" id="ccc">

                                        </div>
                                    </div>
                                </dv-border-box-8>
                            </div>
                            <div class="top-box3">
                                <div class="top-box33">
                                    <dv-border-box-12>
                                        <p style="padding-left: 20px;padding-top: 10px;">互联网通整合情况</p>
                                        <div style="width: 100%;height:200px" id="ddd">

                                        </div>
                                    </dv-border-box-12>
                                </div>
                                <div class="top-box333">
                                    <dv-border-box-12>
                                        <p style="padding-left: 20px;padding-top: 10px;">办事主题概况</p>
                                        <div class="progress-group">
                                            <!-- 个人&法人进度条 -->
                                            <div class="progress-card">
                                                <div class="title">
                                                    <span class="label">个人</span>
                                                    <span class="value">500</span>
                                                    <span class="label">法人</span>
                                                    <span class="value">250</span>
                                                </div>
                                                <div class="progress-bar">
                                                    <div class="bar personal"
                                                        :style="{ width: 'calc(500 / (500 + 250) * 100%)' }"></div>
                                                    <div class="bar legal"
                                                        :style="{ width: 'calc(250 / (500 + 250) * 100%)' }"></div>
                                                </div>
                                            </div>

                                            <!-- 已认证&未认证进度条 -->
                                            <div class="progress-card">
                                                <div class="title">
                                                    <span class="label">已认证用户</span>
                                                    <span class="value">200</span>
                                                    <span class="label">未认证用户</span>
                                                    <span class="value">50</span>
                                                </div>
                                                <div class="progress-bar">
                                                    <div class="bar verified"
                                                        :style="{ width: 'calc(200 / (200 + 50) * 100%)' }"></div>
                                                    <div class="bar unverified"
                                                        :style="{ width: 'calc(50 / (200 + 50) * 100%)' }"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </dv-border-box-12>
                                </div>
                            </div>
                            <div class="top-box4">
                                <dv-border-box-9>
                                    <table class="data-table">
                                        <!-- 表头 -->
                                        <thead>
                                            <tr>
                                                <th>编号</th>
                                                <th>申办主体</th>
                                                <th>受理部门</th>
                                                <th>受理事项</th>
                                                <th>申报日期</th>
                                            </tr>
                                        </thead>
                                        <!-- 表体 -->
                                        <tbody>
                                            <tr>
                                                <td>100001</td>
                                                <td>王二爷</td>
                                                <td>国税局</td>
                                                <td class="matter-cell">增值税专用发票增量申请（2024年度第三季度）</td>
                                                <td>2024-01-01</td>
                                            </tr>
                                            <tr>
                                                <td>100002</td>
                                                <td>王三鱼</td>
                                                <td>国税局</td>
                                                <td class="matter-cell">增值税专用发票增量申请（2024年度第三季度）</td>
                                                <td>2024-01-01</td>
                                            </tr>
                                            <tr>
                                                <td>100003</td>
                                                <td>王大爷</td>
                                                <td>国税局</td>
                                                <td class="matter-cell">增值税专用发票增量申请（2024年度第三季度）</td>
                                                <td>2024-01-01</td>
                                            </tr>
                                            <tr>
                                                <td>100004</td>
                                                <td>王钱多</td>
                                                <td>国税局</td>
                                                <td class="matter-cell">增值税专用发票增量申请（2024年度第三季度）</td>
                                                <td>2024-01-01</td>
                                            </tr>
                                            <tr>
                                                <td>100005</td>
                                                <td>王大爷</td>
                                                <td>国税局</td>
                                                <td class="matter-cell">增值税专用发票增量申请（2024年度第三季度）</td>
                                                <td>2024-01-01</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </dv-border-box-9>
                            </div>
                        </div>
                        <!-- 中间 -->
                        <div class="center-box">
                            <div class="center-box1">
                                <dv-border-box-9>
                                    <div style="display: flex;">
                                        <div style="width: 150px;height: 60px;margin-left: 15px;margin-top: 70px;">
                                            <dv-border-box-12>
                                                <div
                                                    style="display: flex;align-items: center; margin-left: 15px;padding-top: 5px;">
                                                    <img src="../../images/5.png" alt="" style="width: 50px;">
                                                    <div>
                                                        <p>入驻单位</p>
                                                        <p style="font-size: 25px;color: #f9c100;">30</p>
                                                    </div>
                                                </div>
                                            </dv-border-box-12>
                                        </div>
                                        <div style="width: 150px;height: 60px;margin-left: 60px;margin-top: 70px;">
                                            <dv-border-box-12>
                                                <div
                                                    style="display: flex;align-items: center; margin-left: 15px;padding-top: 5px;">
                                                    <img src="../../images/6.png" alt="" style="width: 50px;">
                                                    <div>
                                                        <p>服务窗口</p>
                                                        <p style="font-size: 25px;color: #f9c100;">900</p>
                                                    </div>
                                                </div>
                                            </dv-border-box-12>
                                        </div>
                                        <div style="width: 150px;height: 60px;margin-left: 60px;margin-top: 70px;">
                                            <dv-border-box-12>
                                                <div
                                                    style="display: flex;align-items: center; margin-left: 15px;padding-top: 5px;">
                                                    <img src="../../images/7.png" alt="" style="width: 50px;">
                                                    <div>
                                                        <p>大厅人员</p>
                                                        <p style="font-size: 25px;color: #f9c100;">4321</p>
                                                    </div>
                                                </div>
                                            </dv-border-box-12>
                                        </div>
                                    </div>
                                </dv-border-box-9>
                            </div>
                            <div class="center-box2">
                                <dv-border-box-13>
                                    <div>
                                        <p style="margin-left: 30px;padding-top: 40px; font-size: 20px;">业务办理 TOP5</p>
                                        <div style="display: flex;">
                                            <div>
                                                <div style="width: 150px; height:100px;
                                            margin-left: 30px;margin-top: 30px;">
                                                    <dv-border-box-7 backgroundColor="#102c44">
                                                        <div
                                                            style="width: 100%;height:100%;display: flex; justify-content: center;flex-direction: column;align-items: center;">
                                                            <p style="margin-bottom: 20px; font-size: 30px;">77</p>
                                                            <p style="font-size: 15px;">入库单位</p>
                                                        </div>
                                                    </dv-border-box-7>
                                                </div>
                                                <div style="width: 150px; height:100px;
                                             margin-left: 30px;margin-top: 30px;">
                                                    <dv-border-box-7 backgroundColor="#102c44">
                                                        <div
                                                            style="width: 100%;height:100%;display: flex; justify-content: center;flex-direction: column;align-items: center;">
                                                            <p style="margin-bottom: 20px; font-size: 30px;">334477</p>
                                                            <p style="font-size: 15px;">入库证照种类</p>
                                                        </div>
                                                    </dv-border-box-7>
                                                </div>
                                                <div style="width: 150px; height:100px;
                                            margin-left: 30px;margin-top: 30px;">
                                                    <dv-border-box-7 backgroundColor="#102c44">
                                                        <div
                                                            style="width: 100%;height:100%;display: flex; justify-content: center;flex-direction: column;align-items: center;">
                                                            <p style="margin-bottom: 20px; font-size: 30px;">5555</p>
                                                            <p style="font-size: 15px;">业务事项1</p>
                                                        </div>
                                                    </dv-border-box-7>
                                                </div>
                                            </div>

                                            <div>
                                                <div style="width: 150px; height:100px;
                                            margin-left: 35px;margin-top: 30px;">
                                                    <dv-border-box-7 backgroundColor="#102c44">
                                                        <div
                                                            style="width: 100%;height:100%;display: flex; justify-content: center;flex-direction: column;align-items: center;">
                                                            <p style="margin-bottom: 20px; font-size: 30px;">789</p>
                                                            <p style="font-size: 15px;">入库证照</p>
                                                        </div>
                                                    </dv-border-box-7>
                                                </div>
                                                <div style="width: 150px; height:100px;
                                            margin-left: 35px;margin-top: 30px;">
                                                    <dv-border-box-7 backgroundColor="#102c44">
                                                        <div
                                                            style="width: 100%;height:100%;display: flex; justify-content: center;flex-direction: column;align-items: center;">
                                                            <p style="margin-bottom: 20px; font-size: 30px;">4789</p>
                                                            <p style="font-size: 15px;">查验查量</p>
                                                        </div>
                                                    </dv-border-box-7>
                                                </div>
                                                <div style="width: 150px; height:100px;
                                            margin-left: 35px;margin-top: 30px;">
                                                    <dv-border-box-7 backgroundColor="#102c44">
                                                        <div
                                                            style="width: 100%;height:100%;display: flex; justify-content: center;flex-direction: column;align-items: center;">
                                                            <p style="margin-bottom: 20px; font-size: 30px;">8888</p>
                                                            <p style="font-size: 15px;">业务事项2</p>
                                                        </div>
                                                    </dv-border-box-7>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </dv-border-box-13>
                            </div>
                            <div class="center-box3">
                                <dv-border-box-10>
                                    <div>
                                        <p style="margin-left: 30px;padding-top: 10px;">业务累计平均办理时长 TOP5</p>
                                        <div style="width: 600px;height:150px;" id="center-chart">

                                        </div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                        </div>
                        <!-- 右边 -->
                        <div class="bomit-box">
                            <div class="bomit-box1">
                                <dv-border-box-10>
                                    <p style="padding-top: 20px;margin-left: 10px;">业务办理情况总览</p>
                                    <div class="dashboard" style="margin-top: 30px;">
                                        <!-- 第一行卡片 -->
                                        <div class="card bg-blue">
                                            <span class="label">本周积累办理量</span>
                                            <span class="value">2657</span>
                                        </div>
                                        <div class="card bg-blue">
                                            <span class="label">本月累计办理</span>
                                            <span class="value">5545</span>
                                        </div>
                                        <div class="card bg-blue">
                                            <span class="label">本年累计办理量</span>
                                            <span class="value">21445</span>
                                        </div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                            <div class="bomit-box2">
                                <dv-border-box-12>
                                    <p style="padding-left: 20px;padding-top: 10px;">业务办理量统计</p>
                                    <div style="width: 90%;height:250px" id="bomit-chart">

                                    </div>
                                </dv-border-box-12>
                            </div>
                            <div class="bomit-box3">
                                <div class="bomit-box33">
                                    <dv-border-box-10>
                                        <dv-active-ring-chart :config="config" style="width:200px;height:200px;" />
                                    </dv-border-box-10>
                                </div>
                                <div class="bomit-box333">
                                    <dv-border-box-12>
                                        <p style="padding-left: 20px;padding-top: 10px;">业务办理进度</p>
                                        <div style="width: 100%;height:180px" id="bomit-capsule-chart">

                                        </div>
                                    </dv-border-box-12>
                                </div>
                            </div>
                            <div class="bomit-box4">
                                <dv-border-box-9>
                                    <p style="padding-left: 20px;padding-top: 10px;">关键业务指标</p>
                                    <div class="indicator-cards">
                                        <div class="indicator-card">
                                            <div class="indicator-icon">📊</div>
                                            <div class="indicator-content">
                                                <div class="indicator-value">98.6%</div>
                                                <div class="indicator-label">办结率</div>
                                            </div>
                                        </div>
                                        <div class="indicator-card">
                                            <div class="indicator-icon">⏱️</div>
                                            <div class="indicator-content">
                                                <div class="indicator-value">2.3天</div>
                                                <div class="indicator-label">平均办理时长</div>
                                            </div>
                                        </div>
                                        <div class="indicator-card">
                                            <div class="indicator-icon">👍</div>
                                            <div class="indicator-content">
                                                <div class="indicator-value">99.2%</div>
                                                <div class="indicator-label">满意度</div>
                                            </div>
                                        </div>
                                        <div class="indicator-card">
                                            <div class="indicator-icon">📈</div>
                                            <div class="indicator-content">
                                                <div class="indicator-value">+15.3%</div>
                                                <div class="indicator-label">同比增长</div>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-9>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    reactive,
    onMounted,
    onUnmounted,
} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import * as echarts from 'echarts';
import { useRouter } from 'vue-router'

export default defineComponent({

    setup() {
        // * tab切换 颜色背景改变
        const lastChar = location.href.substr(location.href.length - 1)
        const tabColor = ref(lastChar)
        // * 颜色
        const decorationColors = ['#568aea', '#000000']
        // * 加载标识
        const loading = ref<boolean>(true)
        // * 时间内容
        const timeInfo = reactive({
            setInterval: 0,
            dateDay: '',
            dateYear: '',
            dateWeek: ''
        })
        const router = useRouter()
        //路由跳转
        const shou = () => {
            router.push("/")
            console.log("跳转成功");
        }

        const tiao = () => {
            router.push("/wzh2")
            console.log("跳转成功");
        }

        const tiao2 = () => {
            router.push("/wzh3")
        }

        const tiao3 = () => {
            router.push("/sjk")
        }

        const tiao4 = () => {
            router.push("/sjk1")
        }
        const tiao5 = () => {
            router.push("/sjk2")
        }
        const tiao6 = () => {
            router.push("/mhr1")
        }
        const tiao7 = () => {
            router.push("/mhr2")
        }
        const tiao8 = () => {
            router.push("/mhr3")
        }
        const tiao9 = () => {
            router.push("/st1")
        }
        const tiao10 = () => {
            router.push("/st2")
        }
        const tiao11 = () => {
            router.push("/st3")
        }

        // * 适配处理
        const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
        // 生命周期
        onMounted(() => {
            cancelLoading()
            handleTime()
            // todo 屏幕适应
            windowDraw()
            calcRate()
            setTimeout(() => {
                var chartDom = document.getElementById('ccc');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        color: "#ccc",
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('ddd');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: 'Referer of a Website',
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads' }
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {

                var chartDom = document.getElementById('bbb');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('bomit-chart');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.2)'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            name: '办理量',
                            type: 'bar',
                            barWidth: '60%',
                            data: [320, 332, 301, 334, 390, 330, 320],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#188df0' }
                                ])
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        { offset: 0, color: '#2378f7' },
                                        { offset: 0.7, color: '#2378f7' },
                                        { offset: 1, color: '#83bff6' }
                                    ])
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('bomit-chart');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.2)'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            name: '办理量',
                            type: 'bar',
                            barWidth: '60%',
                            data: [320, 332, 301, 334, 390, 330, 320],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#188df0' }
                                ])
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        { offset: 0, color: '#2378f7' },
                                        { offset: 0.7, color: '#2378f7' },
                                        { offset: 1, color: '#83bff6' }
                                    ])
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('center-chart');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['业务A', '业务B', '业务C', '业务D', '业务E'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            rotate: 45
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '平均时长(分钟)',
                        nameTextStyle: {
                            color: '#fff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.2)'
                            }
                        }
                    },
                    series: [
                        {
                            name: '平均办理时长',
                            type: 'bar',
                            barWidth: '50%',
                            data: [45, 38, 52, 29, 41],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#ff9a9e' },
                                    { offset: 0.5, color: '#fad0c4' },
                                    { offset: 1, color: '#fad0c4' }
                                ])
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#ff6b6b' },
                                        { offset: 0.7, color: '#ff6b6b' },
                                        { offset: 1, color: '#ff9a9e' }
                                    ])
                                }
                            },
                            label: {
                                show: true,
                                position: 'top',
                                color: '#fff',
                                formatter: '{c}分钟'
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('center-chart');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['业务A', '业务B', '业务C', '业务D', '业务E'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            rotate: 45
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '平均时长(分钟)',
                        nameTextStyle: {
                            color: '#fff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.2)'
                            }
                        }
                    },
                    series: [
                        {
                            name: '平均办理时长',
                            type: 'bar',
                            barWidth: '50%',
                            data: [45, 38, 52, 29, 41],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#ff9a9e' },
                                    { offset: 0.5, color: '#fad0c4' },
                                    { offset: 1, color: '#fad0c4' }
                                ])
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#ff6b6b' },
                                        { offset: 0.7, color: '#ff6b6b' },
                                        { offset: 1, color: '#ff9a9e' }
                                    ])
                                }
                            },
                            label: {
                                show: true,
                                position: 'top',
                                color: '#fff',
                                formatter: '{c}分钟'
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('bomit-capsule-chart');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: '{b}: {c}件'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        max: 100,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['已完成', '进行中', '待处理'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 12
                        }
                    },
                    series: [
                        {
                            name: '业务数量',
                            type: 'bar',
                            data: [85, 60, 30],
                            barWidth: 20,
                            itemStyle: {
                                borderRadius: [0, 10, 10, 0],
                                color: function(params) {
                                    var colorList = ['#5470c6', '#91cc75', '#fac858'];
                                    return colorList[params.dataIndex];
                                }
                            },
                            label: {
                                show: true,
                                position: 'right',
                                color: '#fff',
                                fontSize: 12,
                                formatter: '{c}件'
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('bomit-capsule-chart');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: '{b}: {c}件'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        max: 100,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['已完成', '进行中', '待处理'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 12
                        }
                    },
                    series: [
                        {
                            name: '业务数量',
                            type: 'bar',
                            data: [85, 60, 30],
                            barWidth: 20,
                            itemStyle: {
                                borderRadius: [0, 10, 10, 0],
                                color: function(params) {
                                    var colorList = ['#5470c6', '#91cc75', '#fac858'];
                                    return colorList[params.dataIndex];
                                }
                            },
                            label: {
                                show: true,
                                position: 'right',
                                color: '#fff',
                                fontSize: 12,
                                formatter: '{c}件'
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
        })

        onUnmounted(() => {
            unWindowDraw()
            clearInterval(timeInfo.setInterval)
        })

        //点击颜色切换  路由跳转
        const tab = (index) => {
            // console.log(index)
            tabColor.value = index
            router.push(`/tab${index}`)
        }

        // methods
        // todo 处理 loading 展示
        const cancelLoading = () => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        }

        // todo 处理时间监听
        const handleTime = () => {
            timeInfo.setInterval = setInterval(() => {
                const date = new Date()
                timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
                timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
                timeInfo.dateWeek = WEEK[date.getDay()]
            }, 1000)
        }

        // return
        return {
            loading,
            timeInfo,
            appRef,
            title,
            subtitle,
            moduleInfo,
            tabColor,
            tab,
            tiao,
            tiao2,
            shou,
            tiao3,
            tiao4,
            tiao5,
            tiao6,
            tiao7,
            tiao8,
            tiao9,
            tiao10,
            tiao11
        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

.top-box1 {
    width: 500px;
    height: 200px;
    margin-top: 10px;
}

.top-box2 {
    width: 600px;
    height: 250px;
}

.top-box3 {
    width: 650px;
    height: 200px;
    display: flex;
    justify-content: space-around;

    .top-box33 {
        width: 38%;
        height: 100%;
    }

    .top-box333 {
        width: 58%;
        height: 100%;
    }
}

.top-box4 {
    width: 700px;
    height: 230px;
}



.center-box1 {
    width: 600px;
    height: 200px;
    margin-top: 10px;

}

.center-box2 {
    width: 400px;
    height: 500px;
    margin-left: 100px;
}

.center-box3 {
    width: 600px;
    height: 200px;
}

.bomit-box1 {
    width: 500px;
    height: 200px;
    margin-left: 90px;
}

.bomit-box2 {
    width: 600px;
    height: 300px;
}

.bomit-box3 {
    width: 600px;
    height: 200px;
    display: flex;

    .bomit-box33 {
        width: 30%;
        height: 200px;
    }

    .bomit-box333 {
        width: 70%;
        height: 200px;
    }
}

.bomit-box4 {
    width: 500px;
    height: 200px;
}

.indicator-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    padding: 15px;
    height: calc(100% - 50px);
}

.indicator-card {
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1c32 100%);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.indicator-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #00c9ff, #92fe9d);
}

.indicator-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.indicator-icon {
    font-size: 24px;
    margin-right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.indicator-content {
    flex: 1;
}

.indicator-value {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.indicator-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress-card {
    border-radius: 8px;
    padding: 16px;
}

.title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 16px;
    width: 336px !important;
    background-image: none !important;
}

.label {
    opacity: 0.8;
}

.value {
    font-weight: bold;
}

.progress-bar {
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
}

.bar {
    height: 100%;
}

.personal {
    background-color: #ffaa00;
    /* 橙色 */
}

.legal {
    background-color: #00c0fa;
    /* 蓝色 */
}

.verified {
    background-color: #36cfc9;
    /* 绿色 */
}

.unverified {
    background-color: #f53f3f;
    /* 红色 */
}

.table-container {
    width: 100%;
    background-color: #0f1c32;
    padding: 10px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    /* 合并边框 */
    color: #fff;
    font-size: 14px;
}

/* 表头样式 */
.data-table thead {
    background: linear-gradient(to right, #00a8e8, #007ea7);
}

.data-table th {
    padding: 10px 8px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #0f3a5f;
}

/* 表体样式 */
.data-table td {
    padding: 10px 8px;
    text-align: center;
    border: 1px solid #0f3a5f;
}

/* 受理事项列特殊处理（防止文字溢出） */
.matter-cell {
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 溢出隐藏 */
    text-overflow: ellipsis;
    /* 省略号 */
    max-width: 200px;
    /* 最大宽度 */
}

/* 奇偶行交替色 */
.data-table tbody tr:nth-child(even) {
    background-color: #0f2a48;
}

.data-table tbody tr:nth-child(odd) {
    background-color: #0f1c32;
}

/*  hover效果 */
.data-table tbody tr:hover {
    background-color: #1a4a7a;
}

/* 大屏容器 */
.dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    /* 背景色 */
}

/* 卡片样式 */
.card {
    background-color: #1a2c4e;
    border-radius: 8px;
    padding: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* 左侧高亮条 */
.card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #00c9ff, #92fe9d);
    /* 渐变高亮 */
}

/* 标签与数值样式 */
.label {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 8px;
    display: block;
}

.value {
    font-size: 24px;
    font-weight: bold;
}
</style>
